// 定义变量
@bg-1: #c6c5e1;
@bg-2: #686688;

@white-1: #fbfbfb;
@white-2: #f2f2f2;
@white-3: #c4c2d6;
@white-4: #675d6e;

@water-1: #7095c9;
@water-2: #6187be;
@water-3: #4d6d98;
@water-4: #234062;

@light-1: #def5f1;
@light-2: #badfd9;

// 定义函数
.cube-front(@a, @b, @c, @color) {
  width: @a;
  height: @b;
  transform: rotateX(90deg) translateZ(-@c);
  transform-origin: top;
  background-color: @color;
}

.cube-back(@a, @b, @c, @color) {
  width: @a;
  height: @b;
  transform: rotateX(90deg);
  transform-origin: top;
  background-color: @color;
}

.cube-left(@a, @b, @c, @color) {
  width: @c;
  height: @b;
  transform-origin: left bottom;
  transform: rotateY(-90deg) rotateZ(90deg) translateX(-@b);
  background-color: @color;
}

.cube-right(@a, @b, @c, @color) {
  width: @c;
  height: @b;
  transform-origin: right bottom;
  transform: rotateY(90deg) rotateZ(-90deg) translateX(@b) translateZ(@a - @c);
  background-color: @color;
}

.cube-top(@a, @b, @c, @color) {
  width: @a;
  height: @c;
  transform: translateZ(@b);
  background-color: @color;
}

.cube-bottom(@a, @b, @c, @color) {
  width: @a;
  height: @c;
  background-color: @color;
}

.cube(@a, @b, @c, @color) {
  &-front {
    .cube-front(@a, @b, @c, @color);
  }
  &-back {
    .cube-back(@a, @b, @c, @color);
  }
  &-left {
    .cube-left(@a, @b, @c, @color);
  }
  &-right {
    .cube-right(@a, @b, @c, @color);
  }
  &-top {
    .cube-top(@a, @b, @c, @color);
  }
  &-bottom {
    .cube-bottom(@a, @b, @c, @color);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background-color: @bg-1;
  cursor: pointer;
  font-size: 2em;

  // 房屋开始
  .house {
    width: 36rem;
    height: 24rem;
    color: maroon;
    transform: perspective(2000px) rotateX(75deg) rotateZ(35deg)
      translateZ(-9rem);
    position: relative;

    // 整体阴影开始
    .shadows {
      width: 100%;
      height: 100%;
      background-color: red;
      position: absolute;
      .shadowInner {
        width: 130%;
        height: 106%;
        background-color: #686688;
        position: absolute;
        right: 0;
        bottom: 0;
        transform-origin: top right;
        transform: skewY(-3deg);
        box-shadow: -1rem 1rem 1.5rem #686688;
        filter: blur(0.5rem);
      }
    }
    // 整体阴影结束

    // 立方体
    .cube {
      position: absolute;
    }

    // 面
    .face {
      background-color: wheat;
      position: absolute;
    }

    // 地板主区域开始
    .floorMain {
      width: 30rem;
      height: 24rem;
      .cube(30rem, 0.4rem, 24rem, blue);

      // 上色
      &-front {
        background-image: linear-gradient(
          to right,
          darken(@white-3, 20),
          @white-3
        );
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: darken(@white-3, 25);
      }
      &-top {
        background-image: linear-gradient(
          to right,
          darken(@white-3, 10) 40%,
          darken(@white-2, 5),
          @white-2
        );
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          width: 13rem;
          height: 7rem;
          // background-color: blue;
          background-image: linear-gradient(
            -135deg,
            transparent 20%,
            rgba(darken(@light-2, 5), 0.75)
          );
        }
        &::after {
          content: "";
          position: absolute;
          bottom: 1rem;
          left: 6rem;
          width: 5rem;
          height: 5rem;
          // background-color: maroon;
          border-radius: 50%;
          background-image: radial-gradient(rgba(@white-1, 0.25), transparent);
          filter: blur(0.7rem);
        }
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 地板主区域结束

    // 地板右下角开始
    .floorRightDown {
      width: 6rem;
      height: 8rem;
      right: 0;
      bottom: 0;
      .cube(6rem, 0.4rem, 8rem, red);

      // 上色
      &-front {
        background-color: @white-3;
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: @white-2;
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 地板右下角结束

    // 地板右上角开始
    .floorRightUp {
      width: 6rem;
      height: 4rem;
      right: 0;
      top: 0;
      .cube(6rem, 0.4rem, 4rem, maroon);

      // 上色
      &-front {
        background-color: @white-3;
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: @white-2;
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 地板右上角结束

    // 玻璃地板开始
    .floorGlass {
      width: 6rem;
      height: 12rem;
      right: 0;
      top: 4rem;
      .cube(6rem, 1rem, 12rem, purple);

      // 上色
      &-front {
        background-color: @water-3;
        opacity: 0.75;
      }
      &-back {
        background-color: @water-3;
      }
      &-right {
        background-image: linear-gradient(to top, @water-2, @water-1);
      }
      &-left {
        background-color: darken(@water-4, 10);
      }
      &-top {
        opacity: 0.75;
        background-image: linear-gradient(
          to right,
          @water-1 0,
          @water-1 5%,
          @water-2 20%,
          @water-2 30%,
          @water-1 40%,
          @water-1 65%,
          darken(@water-1, 3) 70%,
          darken(@water-1, 3) 72%,
          @water-1 85%
        );

        box-shadow: inset 0.5em 0.5em 2em rgba(@white-1, 0.5);

        &::before {
          content: "";
          position: absolute;
          width: 40%;
          height: 100%;
          overflow: hidden;
          background-image: linear-gradient(
            to bottom,
            transparent 0,
            transparent 10%,
            rgba(@water-2, 0.9) 15%,
            rgba(@water-2, 0.9) 40%,
            rgba(@white-1, 0.2) 40%,
            rgba(@white-1, 0.2) 50%,
            transparent 60%
          );
          filter: blur(0.15em);
        }
      }
      &-bottom {
        background-color: @water-3;
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          box-shadow: -0.25em 0.25em 1em @water-4;
        }
      }
    }
    // 玻璃地板结束

    // 客厅的地板主区域右侧1开始
    .floorMainRight1 {
      width: 17rem;
      height: 20.5rem;
      right: 6rem;
      top: 0;
      position: absolute;
      transform: translateZ(0.41rem);
      .cube(17rem, 0.5rem, 22rem,#fff);
      &-front {
        background-image: linear-gradient(
          to right,
          darken(@white-3, 10),
          @white-3
        );
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-image: linear-gradient(
          135deg,
          darken(@white-3, 10) 60%,
          @white-2
        );
      }
      &-bottom {
        background-color: @white-3;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 101%;
          background-color: @white-4;
          filter: blur(0.35rem);
        }
      }
    }
    // 客厅的地板主区域右侧1结束

    // 客厅的地板主区域右侧2开始
    .floorMainRight2 {
      width: 16rem;
      height: 21rem;
      border: 10px dashed blue;
      background-color: blue;
      right: 6rem;
      top: 0;
      transform: translateZ(0.92rem);
      .cube(16rem,0.5rem,21rem,#fff);
      &-front {
        background-image: linear-gradient(
          to right,
          darken(@white-3, 10),
          @white-3
        );
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-image: linear-gradient(
          135deg,
          darken(@white-3, 10) 60%,
          @white-2
        );

        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 16.4rem;
          background-color: lighten(@bg-1, 5);
        }
        &::after {
          content: "";
          position: absolute;
          bottom: 1.5rem;
          left: 1rem;
          width: 10rem;
          height: 3.5rem;
          border-radius: 50%;
          background-image: radial-gradient(@light-2, transparent);
          filter: blur(0.5rem);
        }
      }
      &-bottom {
        background-color: @white-3;
        // 前侧底部阴影
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 101%;
          background-color: @white-4;
          filter: blur(0.35rem);
        }
      }
    }
    // 客厅的地板主区域右侧2结束

    // 地板主区域左侧1开始
    .floorMainLeft1 {
      width: 13rem;
      height: 17rem;
      border: 10px dashed blue;
      left: 0;
      top: 0;
      transform: translateZ(0.41rem);
      .cube(13.1rem, 0.5rem ,17rem, transparent);
      &-front {
        background-image: linear-gradient(
          to right,
          darken(@white-3, 30),
          darken(@white-3, 10)
        );
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: lighten(@bg-1, 5);
        &::before {
          content: "";
          position: absolute;
          top: 2rem;
          left: 3.5rem;
          width: 12rem;
          height: 12rem;
          border-radius: 50%;
          background-color: rgba(@light-1, 0.35);
          filter: blur(0.95rem);
        }
      }
      &-bottom {
        background-color: @white-3;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 102%;
          background-color: darken(@white-3, 20);
          box-shadow: 0 0.25rem 1rem darken(@white-3, 20);
        }
      }
    }
    // 地板主区域左侧1结束

    // 地板右上角1开始
    .floorRightUp1 {
      width: 4rem;
      height: 4rem;
      right: 2rem;
      top: 0;
      transform: translateZ(0.41rem);
      .cube(4rem,1.1rem,4rem, transparent);
      &-front {
        background-image: linear-gradient(
          to top,
          darken(@white-3, 15) 50%,
          lighten(@white-3, 2)
        );
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: darken(@white-2, 5);
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 地板右上角1结束

    // 地板右下角1开始
    .floorRightDown1 {
      width: 6rem;
      height: 6rem;
      right: 0;
      bottom: 2rem;
      transform: translateZ(0.41rem);
      .cube(6rem,0.5rem,6rem, transparent);
      &-front {
        background-color: @white-3;
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: darken(@white-1, 2);
      }
      &-bottom {
        background-color: @white-1;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 95%;
          height: 104%;
          background-color: @white-4;
          filter: blur(0.35rem);
        }
      }
    }
    // 地板右下角1结束

    // 地板右下角2开始
    .floorRightDown2 {
      width: 4rem;
      height: 5rem;
      right: 2rem;
      bottom: 3rem;
      transform: translateZ(0.92rem);
      .cube(4rem,0.5rem,5rem, transparent);
      &-front {
        background-color: @white-3;
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-2;
      }
      &-left {
        background-color: @white-1;
      }
      &-top {
        background-color: darken(@white-2, 2);
      }
      &-bottom {
        background-color: @white-1;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 95%;
          height: 104%;
          background-color: @white-4;
          filter: blur(0.5rem);
        }
      }
    }
    // 地板右下角2结束

    // 小桌子开始
    .table {
      width: 3rem;
      height: 5rem;
      .cube(3rem,0.25rem,5rem, transparent);
      right: 10.5rem;
      bottom: 13rem;
      position: absolute;
      transform: translateZ(2.25rem);
      &-front {
        background-color: lighten(@white-3, 3);
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-color: darken(@white-2, 3);
      }
      &-bottom {
        background-color: @white-3;
      }
      &::before {
        content: "";
        position: absolute;
        left: -10%;
        top: -10%;
        width: 120%;
        height: 120%;
        background-color: darken(@white-3, 5);
        filter: blur(0.5rem);
        transform: translateZ(-0.81rem);
      }
      .foot {
        width: 0.25rem;
        height: 0.25rem;
        position: absolute;
        transform: rotateZ(90deg) translateZ(-0.81rem);
        .cube(0.25rem, 1rem, 0.25rem, transparent);
        &-front {
          background-color: lighten(@white-3, 3);
        }
        &-back {
          background-color: @white-2;
        }
        &-right {
          background-color: @white-3;
        }
        &-left {
          background-color: @white-2;
        }
        &-top {
          background-color: @white-3;
        }
        &-bottom {
          background-color: @white-3;
        }
        &:nth-of-type(1) {
          bottom: 0;
          right: 0;
        }
        &:nth-of-type(2) {
          bottom: 0;
          left: 0;
        }
        &:nth-of-type(3) {
          top: 0;
          right: 0;
        }
        &:nth-of-type(4) {
          top: 0;
          left: 0;
        }
      }
    }
    // 小桌子结束

    // 座椅1开始
    .couch1 {
      width: 5rem;
      height: 2rem;
      .cube(5rem,2rem,3rem,transparent);
      position: absolute;
      top: 0.5rem;
      left: 16rem;
      transform: translateZ(1.5rem);
      &-front {
        background-color: lighten(@white-3, 6);
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-color: darken(@white-2, 3);
      }
      &-bottom {
        background-color: @white-3;
        &::before {
          content: "";
          position: absolute;
          left: -10%;
          top: -10%;
          width: 120%;
          height: 120%;
          background-color: rgba(darken(@white-3, 10), 0.5);
          filter: blur(0.25rem);
        }
      }
    }
    // 座椅1结束

    // 座椅2开始
    .couch2 {
      width: 7rem;
      height: 0.75rem;
      .cube(7rem,0.75rem,5rem,transparent);
      position: absolute;
      bottom: 17rem;
      left: 6rem;
      transform: translateZ(1rem);
      &-front {
        background-color: lighten(@white-3, 6);
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-image: linear-gradient(
          to right,
          lighten(@light-1, 3),
          lighten(@light-1, 5),
          60%
        );
      }
      &-bottom {
        background-color: @white-3;
        &::before {
          content: "";
          position: absolute;
          left: -10%;
          top: -10%;
          width: 120%;
          height: 120%;
          background-color: rgba(darken(@white-3, 10), 0.5);
          filter: blur(0.25rem);
        }
      }
    }
    // 座椅2结束

    // 后墙开始
    .backWall {
      width: 8rem;
      height: 11rem;
      .cube(8rem, 11rem, 1rem, transparent);
      position: absolute;
      left: 14rem;
      top: 0;
      transform: translateZ(1.5rem);
      &-front {
        background-color: @white-2;
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-2;
      }
      &-top {
        background-color: @white-2;
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 后墙结束

    // 左墙开始
    .leftWall {
      width: 3.5rem;
      height: 12rem;
      .cube(3.5rem, 12rem ,19rem, transparent);
      position: absolute;
      left: 0;
      top: 0;
      transform: translateZ(0.41rem);
      &-front {
        display: flex;
        justify-self: center;
        background-image: linear-gradient(
          to bottom,
          @white-3,
          darken(@white-3, 15)
        );
        overflow: hidden;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1.1rem;
          width: 200%;
          height: 3rem;
          background-image: linear-gradient(
            to right,
            rgba(@light-1, 0.3),
            rgba(@white-3, 0.25)
          );
          filter: blur(0.175rem);
          transform: translateZ(-30deg);
        }
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-image: linear-gradient(
          to top,
          darken(@white-3, 10),
          darken(@white-3, 20),
          lighten(@light-2, 5) 70%
        );
        &::before {
          content: "";
          position: absolute;
          right: 0;
          width: calc(100% - 2.5rem);
          height: 100%;
          background-image: linear-gradient(
            to bottom,
            @white-1,
            lighten(@light-2, 5) 15%,
            darken(@white-2, 10) 80%,
            darken(@white-3, 10)
          );
          filter: blur(0.5rem);
        }
      }
      &-left {
        background-image: linear-gradient(
          to top,
          darken(@white-3, 20),
          darken(@white-3, 30)
        );
      }
      &-top {
        background-color: darken(@white-3, 5);
      }
      &-bottom {
        background-color: @white-3;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 115%;
          height: 103%;
          background-color: rgba(@white-4, 0.75);
          filter: blur(0.5rem);
        }
      }
      .lamp {
        position: absolute;
        top: 7.5rem;
        left: 1.2rem;
        width: 0.75rem;
        height: 2.5rem;
        border-radius: 5rem;
        opacity: 0.95;
        background-color: @light-1;
        box-shadow: 0.15rem 0.15rem 0.75rem rgba(@light-2, 0.5),
          0.15rem -0.15rem 0.75rem rgba(@light-2, 0.5),
          -0.15rem 0.15rem 0.75rem rgba(@light-2, 0.5),
          -0.15rem -0.15rem 0.75rem rgba(@light-2, 0.5);
        filter: blur(0.15rem);
      }
    }
    // 左墙结束

    // 壁画开始
    .picture {
      width: 0.35rem;
      height: 4rem;
      .cube(0.35rem,4rem,3rem,transparent);
      bottom: 12rem;
      left: 3.35rem;
      transform: translateZ(6rem);
      position: absolute;
      &-front {
        background-color: darken(@white-3, 0);
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-image: linear-gradient(to bottom, @light-1, @white-1);
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 1.1rem;
          height: 1.1rem;
          border: 0.125rem solid rgba(@white-3, 0.5);
        }
        &::before {
          top: 40%;
          left: 25%;
        }
        &::after {
          top: 55%;
          left: 45%;
        }
      }
      &-left {
        background-color: @white-3;
      }
      &-top {
        background-color: darken(@white-2, 3);
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 壁画结束

    // 悬台开始
    .kitchen {
      width: 2.35rem;
      height: 0.25rem;
      .cube(2rem, 0.25rem, 12rem, transparent);
      top: 3rem;
      left: 3.5rem;
      transform: translateZ(3rem);
      position: absolute;
      &-front {
        background-color: darken(@white-3, 10);
      }
      &-back {
        background-color: @white-3;
      }
      &-right {
        background-color: @white-1;
      }
      &-left {
        background-color: @white-3;
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 1.25rem;
          top: 0.25rem;
          background-color: rgba(lighten(@white-4, 20, 0.75));
          filter: blur(0.5rem);
        }
      }
      &-top {
        background-image: linear-gradient(
          to right,
          lighten(@light-1, 3),
          lighten(@light-1, 5),
          60%
        );
      }
      &-bottom {
        background-color: @white-3;
      }
    }
    // 悬台结束
  }
  // 房屋结束
}
